<template>
  <div>
    <el-table size='mini' :data="tableData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="width: 100%">
      <el-table-column prop="name" :label="$t('模板名字')" min-width="100">
        <template slot-scope="scope">
          <tooltip :html="scope.row.show_name" :content="scope.row.show_name" class="wid190" :refName="scope.row.show_name">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="type" :label="$t('模板类型')" min-width="100">
        <template slot-scope="scope">
          {{ $t(typeList[scope.row.type]) }}
        </template>
      </el-table-column>
      <el-table-column prop="prot" :label="$t('分组依据')" min-width="100">
        <template slot-scope="scope">
          {{ $t(groupList[scope.row.type][scope.row.group]) }}
        </template>
      </el-table-column>
      <el-table-column prop="des" :label="$t('模板描述')" min-width="200">
        <template slot-scope="scope">
          <tooltip :html="scope.row.des" :content="scope.row.des" class="wid190" :refName="scope.row.des">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="RefCount" :label="$t('引用计数')" width="120">
      </el-table-column>
      <el-table-column align='center' width='160' fixed="right" :label="$t('操作')">
        <template slot-scope="scope">
          <el-button type="success" plain size="mini" @click="showDialogVisible(scope.row)" :class="'detailsRe' + (scope.$index + 1)">{{$t('查看详情')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <TempleDetails v-if="templeVisible" ref="refTempleVisible"></TempleDetails>
  </div>
</template>

<script>
import { getTemplateArray } from '@/api/system/logReport/templateReport'
import TempleDetails from './TempleDetails'
export default {
  name: 'TempleReportRe',
  components: {
    TempleDetails
  },
  data () {
    return {
      templeVisible: false,
      tableData: [],
      typeList: {
        'attack-defense': '异常报文攻击',
        'ddos-defense': 'DDOS攻击',
        'av-defense': '病毒防御',
        'content-filter': '工业审计',
        'ips-defense': '入侵防御',
        'event-type': '事件类型',
        'protocol-type': '协议类型'
      },
      groupList: {
        'attack-defense': {
          'sip': '攻击源地址',
          'dip': '受攻击主机',
          'event-type': '威胁攻击',
          'l4type': '受影响协议'
        },
        'ddos-defense': {
          'dip': '受攻击主机'
        },
        'av-defense': {
          'sip': '攻击源地址',
          'dip': '受攻击主机',
          'event-type': '威胁攻击',
          'l4type': '受影响协议'
        },
        'content-filter': {
          'sip': '源地址',
          'dip': '目的地址',
          'event-type': '工业事件',
          'l4type': '工业协议'
        },
        'ips-defense': {
          'sip': '攻击源地址',
          'dip': '受攻击主机',
          'event-type': '威胁攻击',
          'l4type': '受影响协议'
        },
        'event-type': {
          'event-type': '威胁攻击'
        },
        'protocol-type': {
          'l4type': '受影响协议'
        }
      }
    }
  },
  mounted () {
    this.tableData = []
    getTemplateArray().then(res => {
      if (res.status === 0 && res.info && res.info.length > 0) {
        for (let item of res.info) {
          if (item.level === 'default') {
            this.tableData.push(item)
          }
        }
      }
    })
  },
  methods: {
    diyTemplateShow (value, str) {
      let reStr = ''
      if (value && value.length > 0) {
        for (let item of value) {
          reStr += item + str
        }
      }
      return reStr
    },
    showDialogVisible (data) {
      this.templeVisible = true
      this.$nextTick(() => {
        this.$refs.refTempleVisible.init(data)
      })
    }
  }
}
</script>

<style scoped>
</style>
